@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- 返回首页按钮 -->
            <div class="mb-3">
                <a href="{{ route('home') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <span>商品列表</span>
                        <a href="{{ route('products.create') }}" class="btn btn-primary btn-sm">添加商品</a>
                    </div>
                </div>

                <div class="card-body">
                    <!-- 添加搜索表单 -->
                    <form action="{{ route('products.index') }}" method="GET" class="mb-4">
                        <div class="row g-3 align-items-center">
                            <div class="col-auto">
                                <input type="text"
                                    name="search"
                                    class="form-control"
                                    placeholder="请输入商品名称"
                                    value="{{ request('search') }}">
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary">搜索</button>
                                @if(request('search'))
                                <a href="{{ route('products.index') }}" class="btn btn-secondary">清除</a>
                                @endif
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>商品名称?</th>
                                    <th>图片</th>
                                    <th>价格</th>
                                    <th>库存</th>
                                    <th>销量</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($products as $product)
                                <tr>
                                    <td>{{ $product->id }}</td>
                                    <td>{{ $product->name }}</td>
                                    <td>
                                        @if($product->hasMedia('product-images'))
                                        <span class="text-primary"
                                            title="该商品有{{ $product->getMedia('product-images')->count() }}张图片">
                                            📷
                                        </span>
                                        @else
                                        <span class="text-muted"
                                            title="暂无图片">
                                            🖼️
                                        </span>
                                        @endif
                                    </td>
                                    <td>￥{{ number_format($product->price, 2) }}</td>
                                    <td>{{ $product->stock }}</td>
                                    <td>{{ $product->sales_count }}</td>
                                    <td>
                                        <span class="badge bg-{{ $product->status ? 'success' : 'danger' }}">
                                            {{ $product->status ? '可销售' : '已下架' }}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{ route('products.edit', $product->id) }}"
                                            class="btn btn-sm btn-primary">编辑</a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">暂无商品数据</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($products->hasPages())
                    <div class="mt-4">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination">
                                {{-- 上一页链接 --}}
                                @if ($products->onFirstPage())
                                <li class="page-item disabled">
                                    <span class="page-link">Previous</span>
                                </li>
                                @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $products->previousPageUrl() }}" rel="prev">Previous</a>
                                </li>
                                @endif

                                {{-- 页码链接 --}}
                                @for ($i = 1; $i <= $products->lastPage(); $i++)
                                    @if ($i == $products->currentPage())
                                    <li class="page-item active">
                                        <span class="page-link">{{ $i }}</span>
                                    </li>
                                    @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $products->url($i) }}">{{ $i }}</a>
                                    </li>
                                    @endif
                                    @endfor

                                    {{-- 下一页链接 --}}
                                    @if ($products->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $products->nextPageUrl() }}" rel="next">Next</a>
                                    </li>
                                    @else
                                    <li class="page-item disabled">
                                        <span class="page-link">Next</span>
                                    </li>
                                    @endif
                            </ul>
                        </nav>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection